<template>
  <div class="changeInfo">
    <nav-bar
      class="user-changeInfo"
      title="个人信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <icon name="ellipsis" size="18" />
      </template>
    </nav-bar>
    <cell-group inset style="margin-top: 1rem">
      <Cell value="个人信息" is-link :to="{ name: 'touxiang' }">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">头像 </span>
        </template>
      </Cell>
      <cell value="设置个性昵称" is-link :to="{ name: 'nicheng' }">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">昵称</span>
        </template>
      </cell>
      <cell is-link title="性别" @click="show = true" value="男" />
      <ActionSheet
        v-model:show="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @cancel="onCancel"
      />
    </cell-group>
  </div>
</template>
<script setup>
import { ref } from "vue";
import {
  NavBar,
  Toast,
  Icon,
  Cell,
  CellGroup,
  Button,
  ActionSheet,
  Uploader,
} from "vant";
import { useRouter } from "vue-router";
const { push } = useRouter();
const show = ref(false);
const actions = [{ name: "男" }, { name: "女" }];
const onCancel = () => Toast("取消");

const onClickLeft = () =>
  push({
    name: "user",
  });
const onClickRight = () => Toast("搜索");
</script>
<style lang="scss" scoped>
.changeInfo {
  background-color: #f5f5f9;
  .user-changeInfo {
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
    img {
      max-width: 2rem;
      max-height: 2rem;
    }
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
}
</style>
